<template>
  <div class="home_filtrate_box">
    <Filtrate>
      <div class="right_area" @click="handleShowArea">
        <svg class="weizhi_icon" aria-hidden="true">
          <use xlink:href="#icon-weizhi"></use>
        </svg>
        {{ store.state.area.province }}
      </div>
    </Filtrate>
  </div>
</template>

<script>
import Filtrate from "@/components/filtrate/filtrate.vue";
import { useStore } from "vuex";
export default {
  name: "HomeFiltrate",
  components: { Filtrate },
  setup() {
    // 省份弹出框控制
    const store = useStore();
    const handleShowArea = () => {
      // console.log(1);
      store.commit("area/showAreaPopup", { isPopup: true });
    };
    return { store, handleShowArea };
  },
};
</script>

<style lang="less" scoped>
.weizhi_icon {
  width: 1.5rem;
  height: 1.5rem;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.right_area {
  display: flex;
  align-items: center;
  font-size: 1rem;
  font-weight: bold;
}
.home_filtrate_box {
  width: 100%;
  position: fixed;
  z-index: 99;
  top: 0;
  background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.51yuansu.com%2Fpic3%2Fcover%2F01%2F23%2F24%2F592255b38f95b_610.jpg&refer=http%3A%2F%2Fbpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659234423&t=99c458b6667f4704555fdae9797cd03a);
  background-position: 0px -85px;
  background-repeat: no-repeat;
}
</style>
